<template>
    <div>
        <Card v-if="totalProductNum===0">
            尚未有任何人购买您的商品
        </Card>
        <div v-else>
            <Row>
                <Col>
                    <Input v-model="searchName" placeholder="查询我卖出的物品"></Input>
                </Col>
                <Col span="3">
                    <Select label="筛选" @on-change="stateSearch">
                        <Option v-for="item in filterStateList" :key="item.key" :value="item.value">
                            {{item.value}}
                        </Option>
                    </Select>
                </Col>
                <Col>

                </Col>
                <Col>
                    <Button @click="searchByName">点击查询</Button>
                </Col>
            </Row>
            <Card v-for="(item,index) in saleList" :value="item.sellerId" :key="item.sellerId">
                <Row>
                    <Col style="height: 100px">
                        <img v-bind:src="CoverList[index]" style="height: 100%;width: auto">
                    </Col>
                    <Col span="2" offset="1">
                        <Row>
                            <p>{{ item.productName }}</p>
                        </Row>
                        <Row>
                            <p>{{ item.buyerName }}</p>
                        </Row>
                        <Row>
                            <p style="color: orangered;font-size: large">￥:{{ item.price }}</p>
                        </Row>
                    </Col>
                    <Col span="6">
                        <p>订单当前状态：{{ item.state }}</p>
                        <Row v-if="item.state!=staticState">
                            <Col>
                                <p>修改订单状态为：</p>
                            </Col>
                            <Col>
                                <Select v-model="nowStateList[index]" @on-change="changeState($event,index)">
                                    <Option v-for="state in stateList" :key="state.key" :value="state.value">
                                        {{ state.value }}
                                    </Option>
                                </Select>
                            </Col>
                        </Row>
                        <Row v-else>评价内容：{{item.comment}}</Row>
                    </Col>
                    <Button @click="deleteOrder(item.orderId,index)">删除订单</Button>
                </Row>
            </Card>
            <Col class="mid">
                <Page :total="totalProductNum" @on-change="handlePage" show-total/>
            </Col>
        </div>
    </div>
</template>

<script>
    import axios from "axios";
    import globalData from "@/utils/globalData";

    export default {
        name: "MySale",
        data() {
            return {
                nowStateList: [],
                searchName: "",
                nowPage: 1,
                totalProductNum: 0,
                saleList: [],
                CoverList: [],
                staticState: '已评价',
                nowSelectedState: '',
                stateList: [
                    {
                        key: '等待发货',
                        value: '等待发货'
                    }, {
                        key: '已发货',
                        value: '已发货'
                    }, {
                        key: '已确认收货',
                        value: '已确认收货'
                    }
                ],
                filterStateList: [
                    {
                        key: '无',
                        value: '无'
                    }, {
                        key: '等待发货',
                        value: '等待发货'
                    }, {
                        key: '已发货',
                        value: '已发货'
                    }, {
                        key: '正在派送',
                        value: '正在派送'
                    }, {
                        key: '已确认收货',
                        value: '已确认收货'
                    }, {
                        key: '已评价',
                        value: '已评价'
                    }
                ]
            }
        },
        created: function () {
            let self = this
            axios({
                method: 'get',
                url: 'orderItem/sellerList/' + globalData.USER.userId + "/" + this.nowPage
            }).then(function (res) {
                self.saleList = res.data.content
                self.totalProductNum = res.data.totalElements
                //试图获取卖出物品的封面
                let coverListQueryTemp = {
                    saleCoverUUIDList: []
                }
                let mySelf = self
                for (let i = 0; i < self.saleList.length; i++) {
                    self.nowStateList[i] = self.saleList[i].state
                    self.CoverList[i] = ''
                    coverListQueryTemp.saleCoverUUIDList.push(self.saleList[i].coverUUID)
                    console.log(coverListQueryTemp.saleCoverUUIDList)
                    axios({
                        method: 'get',
                        url: "/file/sig/product/" + self.saleList[i].coverUUID,
                        responseType: 'blob'
                    }).then(function (res) {
                        //good
                        mySelf.$set(mySelf.CoverList, i, window.URL.createObjectURL(res.data))
                    })
                }
            })
        },
        methods: {
            //根据订单状态去查询订单
            stateSearch(val) {
                this.nowSelectedState = val
                let self = this
                axios({
                    method: 'get',
                    url: "orderItem/state/" + val + "/" + globalData.USER.userId + "/1"
                }).then(function (res) {
                    self.saleList = res.data.content
                    self.totalProductNum = res.data.totalElements
                })
            },
            //更新订单的状态
            changeState(event, index) {
                console.log(event)
                console.log(index)
                axios({
                    method: 'patch',
                    url: "orderItem/state/" + this.saleList[index].orderId + "/" + event
                })
                this.$Message.success("修改成功")
            },
            //对翻页做处理
            handlePage(value) {
                this.nowPage = value
                this.search()
            },
            //根据名称查询
            searchByName() {
                let self = this
                axios({
                    method: 'get',
                    url: 'orderItem/PNCS/' + this.searchName + "/" + globalData.USER.userId + "/" + this.nowPage
                }).then(function (res) {
                    self.saleList = res.data.content
                    self.totalProductNum = res.data.totalElements
                })
            },
            //翻页做的查询
            search() {
                let self = this
                let URL = ''
                if (this.nowSelectedState === "无" || this.nowSelectedState === "") {
                    URL = "orderItem/state/" + this.nowSelectedState + "/" + globalData.USER.userId + "/1"
                } else {
                    URL = 'orderItem/PNCS/' + this.searchName + "/" + globalData.USER.userId + "/" + this.nowPage
                }
                axios({
                    method: 'get',
                    url: URL
                }).then(function (res) {
                    self.saleList = res.data.content
                })
            },
            //根据ID查询订单
            deleteOrder(orderId, index) {
                let self = this
                axios({
                    method: 'delete',
                    url: "orderItem/" + orderId
                }).then(function () {
                    self.$Notice.success({
                        title: "删除成功"
                    })
                })
                this.saleList.splice(index, 1)
            }
        }
    }
</script>

<style scoped>
    .mid {
        position: relative;
        margin: 0 auto;
        text-align: center;
    }
</style>